<template>
  <Form :label-width="80">
    <FormItem label="显示">
      <i-switch size="small" v-model="legend.show"></i-switch>
    </FormItem>
    <FormItem label="类型">
      <Tooltip content="可滚动图例在图例数量较多时可以使用" placement="left">
        <!--<Select :transfer="true" size="small" v-model="legend.type">
          <Option value="plain">普通图例</Option>
          <Option value="scroll">可滚动图例</Option>
        </Select>-->
        <RadioGroup size="small" v-model="legend.type" type="button">
          <Radio label="plain">普通图例</Radio>
          <Radio label="scroll">可滚动图例</Radio>
        </RadioGroup>
      </Tooltip>
    </FormItem>
    <FormItem label="位置">
      <Select :transfer="true" size="small" v-model="legend.position">
        <Option v-for="(item, index) in $PnChartDict.legendPositions" :value="item.value" :key="index">{{ item.label }}</Option>
      </Select>
    </FormItem>
    <FormItem label="布局朝向">
      <RadioGroup size="small" v-model="legend.orient" type="button">
        <Radio :label="item.value" v-for="(item, index) in $PnChartDict.orients" :key="index">{{ item.label }}</Radio>
      </RadioGroup>
      <!--<Select :transfer="true" size="small" v-model="legend.orient">
        <Option v-for="(item, index) in $PnChartDict.orients" :value="item.value" :key="index">{{ item.label }}</Option>
      </Select>-->
    </FormItem>
    <FormItem label="图例项间隔">
      <Tooltip content="图例每项之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔" :max-width="200" placement="left">
        <InputNumber size="small" :max="1000" :min="0" v-model="legend.itemGap" :active-change="false"></InputNumber>
      </Tooltip>
    </FormItem>
    <Collapse class="m-t-5px">
      <Panel>
        图例图标
        <div slot="content">
          <FormItem label="形状">
            <Select :transfer="true" size="small" v-model="legend.icon">
              <Option v-for="(item, index) in $PnChartDict.symbols" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="图标宽度">
            <InputNumber size="small" :max="1000" :min="0" v-model="legend.itemWidth" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="图标高度">
            <InputNumber size="small" :max="1000" :min="0" v-model="legend.itemHeight" :active-change="false"></InputNumber>
          </FormItem>
        </div>
      </Panel>
      <Panel>
        文本样式
        <div slot="content">
          <FormItem label="颜色">
            <PnColorPicker size="small" v-model="legend.textStyle.color" alpha recommend/>
          </FormItem>
          <FormItem label="字体大小">
            <InputNumber size="small" :max="1000" :min="0" v-model="legend.textStyle.fontSize" :active-change="false"></InputNumber>
          </FormItem>
        </div>
      </Panel>
    </Collapse>
  </Form>
</template>

<script>
export default {
  name: "EchartsLegendConfigForm",
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data() {
    return {
      legend: this.value
    }
  },
  mounted() {

  },
  methods: {},
  computed: {},
  watch: {
    value (val) {
      this.legend = val;
    }
  }
}
</script>

<style scoped>

</style>
